<template>
  <div class="alert-div pandaBi">
    <div class="alert-fade" @click="closeFP"></div>
    <div class="alert-box">
      <h3>熊猫币使用规则</h3>
      <div class="content">
        <div class="title">熊猫币价值</div>
        <p>1、100熊猫币抵扣1元（人民币）</p>
        <div class="title mtop">熊猫币价值</div>
        <p>1、熊猫币最多抵扣订单金额的90%）</p>
        <p>2、若熊猫币不足订单金额90%，可全部使用</p>
        <p>3、选择使用后自动抵扣最大可用额度</p>
      </div>
      <div class="bottom border-top" @click="closeFP">我知道了</div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {},
    data() {
      return {
      };
    },
    methods: {
        closeFP(){
            this.$parent.isPandaBi=false;
        }
    },
    created() {
    },
    mounted(){},
    components: {
    }
  };
</script>
<style lang="less" scoped>
.pandaBi.alert-div{
  .alert-box{
    width: 80%;
    height: 5.57rem;
    left: 10%;
    transform: translateY(-4.5rem);
    border-radius: 16px;
    h3{
      height: .32rem;
      padding: .55rem 0 .32rem;
      font-size: .32rem;
      color: #333333;
      text-align: center;
    }
    .content{
      padding:0 .3rem ;
      div.title{
        margin-bottom: .1rem;
        font-size: .28rem;
        color: #333333;
      }
      div.mtop{
        margin-top: .55rem;
      }
      p{
        line-height: .44rem;
      }
    }

    .bottom{
      height: 1.01rem;
      line-height: 1.01rem;
      margin-top: .32rem;
      text-align: center;
      font-size: .32rem;
      color: #FF4A4A;
    }
  }
}
</style>
